<template>
	<div class="com-container" @dblclick="revertMap">
		<div class="com-chart" ref="map_ref"></div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		getProvinceMapInfo
	} from '@/utils/map_utils.js'
	import {
		mapState
	} from 'vuex'
	import {
		getThemeValue
	} from '@/utils/theme_utils'
	export default {
		name: 'Map',
		data() {
			return {
				chartInstance: null,
				allData: [],
				echartoption: {},
				MapData: {}
			}
		},
		created() {
			this.$socket.registerCallBack('mapData', this.getData)
		},
		computed: {
			...mapState(['theme'])
		},
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'mapData',
				chartName: 'map',
				value: ''
			})
			window.addEventListener("resize", this.screenAdapter);
			this.screenAdapter()
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('mapData');
		},
		methods: {
			//初始化图表
			async initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.theme);
				const ret = await axios.get("http://localhost:8999/static/map/china.json");
				this.$echarts.registerMap("china", ret.data)
				this.echartoption = {
					backgroundColor: getThemeValue(this.theme).backgroundColor,
					title: {
						text: "▎ 商家分布与销量排行",
						left: 20,
						top: 20
					},
					geo: {
						type: "map",
						map: "china",
						top: "5%",
						bottom: "5%",
						itemStyle: {
							areaColor: "#2e72bf",
							borderColor: "#333"
						}
					},
					legend: {
						left: "5%",
						bottom: "5%",
						orient: 'vertical'
					},
				};
				this.chartInstance.setOption(this.echartoption);
				this.chartInstance.on("click", async arg => {
					//console.log(arg)
					const provinceInfo = getProvinceMapInfo(arg.name);
					if (!this.MapData[provinceInfo.key]) {
						const ret = await axios.get('http://localhost:8999' + provinceInfo.path)
						this.MapData[provinceInfo.key] = ret.data;
						this.$echarts.registerMap(provinceInfo.key, ret.data)
					}
					const changOption = {
						geo: {
							map: provinceInfo.key
						}
					}
					this.chartInstance.setOption(changOption)
				})
			},
			//获取数据
			getData(ret) {
				// const {
				// 	data: ret
				// } = await this.$http.get("map");
				this.allData = ret;
				this.updataChart()
			},
			//更新图表
			updataChart() {
				const serierArr = this.allData.map((item) => {
					return {
						type: 'effectScatter',
						rippleEffect: {
							scale: 5,
							brushType: "stroke"
						},
						name: item.name,
						data: item.children,
						coordinateSystem: "geo"
					}
				});
				const legendArr = this.allData.map((item) => {
					return item.name
				});
				const dataoption = {
					legend: {
						data: legendArr
					},
					series: serierArr
				};
				this.chartInstance.setOption(dataoption);
			},

			screenAdapter() {
				// console.log(this.$refs.map_ref.offsetWidth);
				const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6;
				const adapterOtion = {
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					tooltip: {
						axisPointer: {
							shadowStyle: {
								width: titleFontSize
							}
						}
					},
					legend: {
						itemWidth: titleFontSize / 2,
						itemheight: titleFontSize / 2,
						itemGap: titleFontSize / 2,
						textStyle: {
							fontSize: titleFontSize / 2
						}
					}
				};
				this.chartInstance.setOption(adapterOtion);
				this.chartInstance.resize();
			},
			revertMap() {
				const revertOption = {
					geo: {
						map: 'china'
					}
				};
				this.chartInstance.setOption(revertOption);
			}
		},
		watch: {
			theme() {
				console.log('主题切换了')
				this.chartInstance.dispose() // 销毁当前的图表
				this.initChart() // 重新以最新的主题名称初始化图表对象
				this.screenAdapter() // 完成屏幕的适配
				this.updataChart() // 更新图表的展示
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

</style>
